<template>
	<view class="accumulation">
		<view class="tab_box flex-r-a-c" v-if="type == 2">
			<view class="list" v-for="(item,index) in tabList" :key="index" :class="item.id == tabId ? 'active' : ''" @tap.stop="tabBtn(item.id)">
				<view class="title">{{item.name}}</view>
				<view class="money"><view class="text">{{item.money}}</view>  元</view>
			</view>
		</view>
		
		<view class="list flex-r-b-c" v-for="(item,index) in list" :key="index">
			<view class="list_l">
				<view class="name one-line-ellipsis" v-if="item.rank != '' ">来自{{item.nickname}}({{item.rank}}){{item.level == 1 ? '直推' : '间推'}}的奖励</view>
				<view class="name one-line-ellipsis" v-if="item.rank == '' ">来自{{item.nickname}}{{item.level == 1 ? '直推' : '间推'}}的奖励</view>
				<!-- <view class="introduce one-line-ellipsis">消费了1800.00元</view> -->
				<view class="one-line-ellipsis" style="color: #999999; margin-top: 10rpx; font-size: 24rpx;">订单号：{{item.orderid}}</view>
				<view class="time">{{item.buytime}}</view>
			</view>
			<view class="list_r">+{{item.price}}</view>
		</view>
		<view class="text" style="width: 100%; text-align: center; font-size: 32rpx; font-weight: bold;">{{titleText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: null,
				page: 1, // 页码
				list: [], // 列表数据
				titleText: '', // 上拉提示
				tabList: [{
					name: '零售',
					id: 1,
					money: ''
				},{
					name: '推荐',
					id: 2,
					money: ''
				}],
				tabId: 1
			};
		},
		onLoad(el) {
			this.type = el.type
			el.type == 1 ? this.orderList() : this.agentList()
		},
		onReachBottom() {
			let that = this
			if(that.titleText == ''){ // 防止上拉多次请求
				that.page = that.page+1
				// that.orderList()
				that.type == 1 ? that.orderList() : that.agentList()
			}
		},
		methods:{
			// 代理 获取累积详情
			agentList(){
				let that = this
				that.$api.agent_incomeContent({page: that.page, type: that.tabId}).then(res => {
					console.log(res)
					that.tabList[0].money = res.data.data.price
					that.tabList[1].money = res.data.data.re_price
					that.titleText = res.data.data.list.length == 0 ? '暂无数据' : ''
					that.list = that.list.concat(res.data.data.list)
				})
			},
			// 分销 获取累积详情
			orderList(){
				let that = this
				that.$api.commission_list({page: that.page, type: 1}).then(res => {
					console.log(res)
					that.titleText = res.data.data.data.length == 0 ? '暂无数据' : ''
					that.list = that.list.concat(res.data.data.data)
				})
			},
			// 点击 tab 切换
			tabBtn(id){
				let that = this
				that.tabId = id
				that.page = 1
				that.list = []
				that.agentList()
			}
		}
	}
</script>

<style lang="less">
	.accumulation{
		width: 90vw;
		margin: 0 auto;
		.tab_box{
			width: 100%;
			height: 180rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.active{
				color: #FFFFFF !important;
				background-color: #45806E !important;
			}
			.list{
				width: 40%;
				height: 132rpx;
				border-radius: 20rpx;
				background-color: #F5F5F5;
				font-size: 24rpx;
				font-weight: bold;
				box-sizing: border-box;
				padding: 30rpx;
				
				.money{
					font-size: 20rpx;
					font-weight: 500;
					.text{
						display: inline-block;
						font-size: 36rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
		.list{
			width: 100%;
			height: auto;
			border-radius: 12rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			margin: 30rpx auto;
			.list_l{
				width: 80%;
				.name{
					font-size: 28rpx;
					font-weight: bold;
				}
				.introduce{
					margin-top: 10rpx;
					font-size: 24rpx;
					font-weight: 500;
				}
				.time{
					margin-top: 10rpx;
					font-size: 20rpx;
					color: #9A9A9A;
					font-weight: 300;
				}
			}
			.list_r{
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
</style>
